<template>
    <a-modal :keyboard="false" :maskClosable="false" title="关单" :open="visible" :width="550" :confirmLoading="loading" centered @ok="handleSubmit" @cancel="handleCancel">
        <a-form layout="vertical">
            <a-row :gutter="16" type="flex" justify="start">
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="处理前照片">
                        <a-image-preview-group>
                            <a-space>
                                <template v-for="(item, index) in modelRef.fileList" :key="index">
                                    <audio controls :src="item.viewAddress" v-if="item.oldName.includes('.mp3') || item.oldName.includes('.m4a')"></audio>
                                    <a-button v-else-if="item.oldName.includes('.mp4')" @click="previewVideo(item)">点击查看视频</a-button>
                                    <a-image v-else :width="80" :height="80" :src="item.viewAddress" />
                                </template>
                            </a-space>
                        </a-image-preview-group>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="处理后照片">
                        <custom-upload v-model:fileList="modelRef.afterProcessFiles" accept="image/*"></custom-upload>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="与业主沟通记录" v-bind="validateInfos.confirmFiles">
                        <custom-upload v-model:fileList="modelRef.confirmFiles" upload-text="上传照片、视频、音频" accept="image/*,video/*,audio/*"></custom-upload>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="处理描述" v-bind="validateInfos.detailContent">
                        <a-textarea v-model:value="modelRef.detailContent" show-count :maxlength="500"></a-textarea>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="责任归属" v-bind="validateInfos.orderChargeCompany">
                        <a-radio-group v-model:value="modelRef.orderChargeCompany">
                            <a-radio :value="0">物业</a-radio>
                            <a-radio :value="1">地产</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
    import type { PropType } from 'vue';
    import { defineComponent, reactive, ref, watchEffect, watch } from 'vue';
    import { Form, message } from 'ant-design-vue';
    import { cloneDeep, isEmpty } from 'lodash-es';
    import { closeOrder, checkWarranty } from '@/api/order/mine-list';

    export default defineComponent({
        props: {
            visible: {
                type: Boolean,
                required: true,
            },
            model: {
                type: Object as PropType<any>,
                default: () => null,
            },
        },
        emits: ['cancel', 'success', 'transfer'],
        setup(props, { emit }) {
            const loading = ref(false);

            const defaultForm = {
                orderChargeCompany: 0,
                detailContent: '',
                confirmFiles: [],
                afterProcessFiles: [],
            };
            const modelRef = reactive<any>(cloneDeep(defaultForm));
            const rulesRef = reactive({
                orderChargeCompany: [{ required: true, message: '请选择' }],
                detailContent: [{ required: true, message: '请选择' }],
                // afterProcessFiles: [{ required: true, message: '请上传', type: 'array' }],
                confirmFiles: [{ required: true, message: '请上传', type: 'array' }],
            });
            const { validateInfos, resetFields, validate } = Form.useForm(modelRef, rulesRef);

            // 记录初始值
            const initValues = reactive({});
            watch(
                () => props.visible,
                () => {
                    Object.assign(initValues, cloneDeep(props.model));
                },
            );
            watchEffect(() => {
                if (props.visible) {
                    console.log('props.model', props.model);

                    if (props.model) {
                        Object.assign(modelRef, {
                            orderId: props.model.id,
                            fileList: props.model.fileList,
                            projectCode: props.model.projectCode,
                        });
                    }
                }
            });

            const handleCancel = () => {
                resetFields();
                Object.keys(modelRef).forEach(key => {
                    delete modelRef[key];
                });
                Object.assign(modelRef, cloneDeep(defaultForm));
                modelRef.status = 1;
                emit('cancel');
            };

            const handleSubmit = async () => {
                if (modelRef.orderChargeCompany == 1) {
                    checkWarranty(modelRef.projectCode).then(res => {
                        if (res.data) {
                            emit('transfer');
                        } else {
                            message.warning('当前项目不在质保期内！');
                        }
                    });
                } else {
                    validate().then(() => {
                        loading.value = true;
                        closeOrder({
                            ...modelRef,
                        })
                            .then(res => {
                                if (res.data) {
                                    message.success('操作成功');
                                    emit('success');
                                    handleCancel();
                                }
                            })
                            .finally(() => {
                                loading.value = false;
                            });
                    });
                }
            };
            const previewVideo = ({ viewAddress }) => {
                window.open(viewAddress, '_blank');
            };
            return {
                previewVideo,
                loading,

                modelRef,
                validateInfos,
                resetFields,

                handleSubmit,
                handleCancel,

                initValues,
                isEmpty,
            };
        },
        components: {},
    });
</script>
